import type { TocConfig } from './index'
import { BUTTON_TEMPLATE_STYLES, PROJECT_PREFIX } from '../../../../types/constants'
import { StylesService } from '../../../../types/constants/styles'

export function styles(container_name: string, item_name: string, config: TocConfig): string {
  return `
#${container_name} {
  all: initial;
  position: fixed;                                              /* 固定定位 */
  top: ${config.menu.top};                                      /* 距离顶部的距离 */
  right: ${config.menu.right};                                  /* 距离右侧的距离 */
  width: ${config.menu.width};                                  /* 宽度 */
  background: var(--${PROJECT_PREFIX}-theme-toc-bg) !important; /* 背景颜色 */
  color: var(--${PROJECT_PREFIX}-theme-toc-text) !important;
  z-index: ${config.menu.zIndex};                               /* 确保在其他元素之上 */
  border-radius: ${config.menu.borderRadius};                   /* 圆角 */
  box-sizing: border-box;                                       /* 包含边框和内边距 */
  box-shadow: ${config.menu.boxShadow};                         /* 阴影 */
  line-height: 1.3;                                             /* 行高 */
  max-width: calc(100vw - 1000px);                              /* 防溢出保护 */
  max-height: 50vh;                                             /* 最大高度 */
  overflow-y: auto;                                             /* 溢出时显示滚动条
  user-select: none;                                            /* 防止拖动时文字选中 */
  transition: top 0.3s ease, right 0.3s ease;                   /* 平滑移动效果 */
  ${StylesService.getInstance().scroll.default}
  
  &:has(.title:hover) {
    .content-controls .close-btn {
      opacity: 1;
    }
  }
  
  .content-controls {
    position: relative !important;
    width: fit-content !important;
    
    .close-btn {
      ${BUTTON_TEMPLATE_STYLES.closeHover}
      left: 5px !important;
      opacity: 0;
      
      &:hover {
        opacity: 1;
      }
    }
  }

  .title {
    position: sticky;                                             /* 粘性定位 */
    top: 0;                                                       /* 粘性定位基准点 */
    padding: 15px 20px;                                           /* 标题和内容保持一样的左右边距 */
    z-index: 101;                                                 /* 确保层级高于滚动内容 */
    background: inherit;                                          /* 继承父级背景色 */
    h2 {
      color: var(--${PROJECT_PREFIX}-theme-toc-text) !important;
      margin:0 0 8px;
      font-size: 18px;
      font-weight: bold;
      
      &::before,
      &::after {
        content: none !important;                                   /* 强制清除所有伪元素，去掉小黑点 */
      }
    }
    hr {
      height: ${config.hr.height};                                /* 线条粗细 */
      background: ${config.hr.color};                             /* 背景颜色 */
      margin: 12px 0;                                             /* 上下边距 */
      border: none;                                               /* 移除默认边框 */
    }
  }
  
  .content {
    padding: 0 20px;
    #${item_name} {
      list-style: none;
      margin: 0;
      padding: 0;
      /* 目录项 */
      li {
        font-size: ${config.listItem.fontSize};                                 /* 字体大小 */
        cursor: pointer;                                                        /* 鼠标悬停时的光标样式 */
        transition: all 0.2s;                                                   /* 过渡效果 */
        border-radius: 4px;                                                     /* 圆角 */
        padding-top: 4px;                                                       /* 上边距 */
        padding-bottom: 4px;                                                    /* 下边距 */
        ${StylesService.getInstance().wordBreak.multiLine(3)}
        
        &::marker {
          content: none !important;                                             /* 去掉列表标记 */
        }
      }
      li:hover {
        background: var(--${PROJECT_PREFIX}-theme-toc-li-hover-bg) !important;  /* 悬停时的背景颜色 */
        color: var(--${PROJECT_PREFIX}-theme-toc-li-hover-text) !important;
        text-decoration: none;                                                  /* 悬停时不添加下划线 */
        transform: ${config.listItem.hoverTransform};                           /* 悬停时的动画效果 */
      }
      li.active {
        color: var(--${PROJECT_PREFIX}-theme-toc-li-active-text) !important;    /* 点击时的文字颜色 */
        font-weight: 500;                                                       /* 加粗显示 */
        background: #e8f0fe;                                                    /* 点击时的背景颜色 */
      }
    }
  }
}
  `
}
